<template>
  <el-row class="row-header">
    <el-col :span="5">
      <el-menu
        active-text-color="#303133"
        class="el-menu-demo"
        mode="horizontal"
        style="height: 50px"
        @select="handleSelect"
      >
        <!-- <el-menu-item index="1" @click="handleChange('Processing Centerddd')">
                <svg-icon class-name="iconfont" icon-class="dakaiwendang" />
            </el-menu-item>
             -->
        <el-sub-menu index="1" popper-class="el-menu-demo">
          <template #title>
            <svg-icon class-name="iconfont" icon-class="dakaiwendang"
          /></template>
          <el-menu-item
            index="1-1"
            @click="handleSerivceMenuClick('openService')"
          >
            <div class="check-page">
              <span>打开服务</span>
              <svg-icon class-name="iconfont" icon-class="xuanze" />
            </div>
          </el-menu-item>
          <el-menu-item
            index="1-2"
            @click="handleSerivceMenuClick('saveService')"
          >
            <div class="check-page">
              <span>保存服务</span>
              <svg-icon
                v-show="pageStatus.sources"
                class-name="iconfont"
                icon-class="xuanze"
              />
            </div>
          </el-menu-item>
          <el-menu-item
            index="1-3"
            @click="handleSerivceMenuClick('publishService')"
          >
            <div class="check-page">
              <span>发布服务</span>
              <svg-icon
                v-show="pageStatus.FeatureTable"
                class-name="iconfont"
                icon-class="xuanze"
              />
            </div>
          </el-menu-item>
          <el-menu-item
            index="1-4"
            @click="handleSerivceMenuClick('managerService')"
          >
            <div class="check-page">
              <span>服务管理</span>
              <svg-icon
                v-show="pageStatus.rgLayer"
                class-name="iconfont"
                icon-class="xuanze"
              /></div
          ></el-menu-item>
          <el-menu-item index="1-5" @click="handleSerivceMenuClick('rgSource')">
            <div class="check-page">
              <span>项目信息</span>
              <svg-icon
                v-show="pageStatus.rgSource"
                class-name="iconfont"
                icon-class="xuanze"
              /></div
          ></el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2" popper-class="el-menu-demo">
          <template #title>
            <svg-icon class-name="iconfont" icon-class="dakaiwendang"
          /></template>
          <el-menu-item index="2-1" @click="handleChange('layer')">
            <div class="check-page">
              <span>浏览窗口</span>
              <svg-icon
                v-show="pageStatus.layer"
                class-name="iconfont"
                icon-class="xuanze"
              />
            </div>
          </el-menu-item>
          <el-menu-item index="2-2" @click="handleChange('sources')">
            <div class="check-page">
              <span>图层窗口</span>
              <svg-icon
                v-show="pageStatus.sources"
                class-name="iconfont"
                icon-class="xuanze"
              />
            </div>
          </el-menu-item>
          <el-menu-item index="2-3" @click="handleChange('FeatureTable')">
            <div class="check-page">
              <span>数据表</span>
              <svg-icon
                v-show="pageStatus.FeatureTable"
                class-name="iconfont"
                icon-class="xuanze"
              />
            </div>
          </el-menu-item>
          <el-menu-item index="2-4" @click="handleChange('rgLayer')">
            <div class="check-page">
              <span>工具箱</span>
              <svg-icon
                v-show="pageStatus.rgLayer"
                class-name="iconfont"
                icon-class="xuanze"
              /></div
          ></el-menu-item>
          <el-menu-item index="2-5" @click="handleChange('rgSource')">
            <div class="check-page">
              <span>信息窗口</span>
              <svg-icon
                v-show="pageStatus.rgSource"
                class-name="iconfont"
                icon-class="xuanze"
              /></div
          ></el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-col>
    <el-col :span="6">
      <svg-icon
        v-for="(item, index) in Tool"
        :title="item.label"
        class-name="iconfont"
        @click="handleTool(index)"
        :key="item.id"
        :icon-class="item.icon"
      />
    </el-col>
    <el-col :span="8">
      <h2>空间空间-2</h2>
    </el-col>

    <el-col :span="5">
      <el-button
        type="primary"
        icon="Search"
        plain
        @click="handleChange('按钮1')"
      />
      <el-button type="primary" plain @click="toggleDark()()"
        >切换主题</el-button
      >
      <el-button
        type="primary"
        plain
        @click="handleChange('按钮1')"
      ></el-button>
    </el-col>
  </el-row>
</template>

<script setup>
import { defineEmits, defineProps } from "vue";
import { useDark, useToggle } from "@vueuse/core";

const isDark = useDark();
const toggleDark = useToggle(isDark);
const emits = defineEmits(["changeHide"]);
const props = defineProps(["pageStatus"]);

const mimeClick = {
  按钮1: handleCb,
};
const Tool = [
  {
    id: 1,
    icon: "dakaiwendang",
    label: "打开文档",
  },
  {
    id: 2,
    icon: "dm",
    label: "达梦",
  },
  {
    id: 3,
    icon: "peitujiancha",
    label: "配图检查",
  },
];
const handleSerivceMenuClick = (e) => {
  if (e == "openService") {
    
  } else if (e == "managerService") {
  }
};
const handleChange = (e) => {
  emits("changeHide", e);
  //   mimeClick[e] && mimeClick[e]();
};
const handleTool = (i) => {
  console.log(i);
};

function handleCb() {
  console.log("触发回调");
}
</script>

<style lang="scss">
.check-page {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
  align-items: center;
  width: 100%;
}
.row-header .iconfont {
  width: 40px;
  height: 40px;
  padding: 2.5px;
  box-sizing: border-box;
  cursor: pointer;
}
.el-menu-demo .el-menu--popup {
  min-width: 100px !important;
}
</style><style lang="scss" scoped>
.el-menu--horizontal.el-menu {
  border-bottom: none;
}

.row-header {
  height: 50px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 10px;

  h2 {
    text-align: left;
    margin: 0;
  }
}
</style>
